<template>
  <div>
    <el-dialog title="选择合同模板" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
      <div>
        <el-row>
          <el-col :span="4">合同类型:</el-col>
          <el-col :span="20">
            <el-radio-group v-model="contractType" class="hideCircle" size="small">
              <el-radio :label="item.value" v-for="item in contractTypes" border :key="item.value">{{item.label}}</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="4">合同细类:</el-col>
          <el-col :span="20">
            <el-radio-group v-model="contractDetail">
              <el-radio style="margin-bottom:10px;" :label="item.value" v-for="item in contractSubTypes" :key="item.value">{{item.label}}</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="next">确定下一步</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "contract-type-select",
  data () {
    return {
      // 合同类型
      contractType: '',
      // 合同细类
      contractDetail: '',
      dialogVisible: false,
    }
  },

  computed: {
    // 合同类型列表
    contractTypes () {
      return this.getDict('rent_contract_type').filter(it => it.value === '04')
    },
    // 合同细类列表
    contractSubTypes () {
      return this.getDict('rent_contract_sub_type').filter(it => it.value === '11')
    }
  },
  watch: {
    contractType (val) {
      this.contractDetail = this.contractSubTypes[0].value
    }
  },
  methods: {
    show () {
      this.dialogVisible = true;
      this.contractType = this.contractTypes.length ? this.contractTypes[0].value : ''
    },
    next () {
      if (this.contractType != '' && this.contractDetail != '') {
        this.$parent.$router.push({ path: "/wy-operate/collection/contract/edit?optype=add&type=" + this.contractType + "&subtype=" + this.contractDetail });
      } else {
        this.$alert("请选择合同模板和合同细类")
      }
    }
  }

}
</script>
<style scoped lang="scss">
@include formWrap();
.hideCircle {
  /deep/ .el-radio {
    min-width: 150px;
    padding: 0;
    border-radius: 2px;
    line-height: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    &:after {
      content: "";
      width: 20px;
      height: 20px;
      background-color: #409eff;
      position: absolute;
      right: -10px;
      bottom: -10px;
      transform: rotate(45deg);
      display: none;
    }
    &.is-checked {
      border: 1px solid #409eff;
      &:after {
        display: block;
      }
    }
    .el-radio__inner {
      display: none;
    }
    .el-radio__label {
      font-size: 14px;
    }
  }
}
</style>


